import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/core/utils/ati_assets.dart';
import 'package:ati_package/core/utils/ati_font.dart';
import 'package:ati_package/pages/common/widgets/ati_common_btn.dart';
import 'package:ati_package/pages/common/widgets/ati_text_input.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../core/utils/ati_color.dart';

class RegisterView extends StatefulWidget {
  const RegisterView({super.key});

  @override
  State<RegisterView> createState() => _RegisterViewState();
}

class _RegisterViewState extends State<RegisterView> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 22.5.r, right: 22.5.r, top: 125.r),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(AtiAssets.userLoginBg, package: 'ati_package'),
          fit: BoxFit.cover,
        ),
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: [_buildContentBg(), _buildLogo(), _buildDelete()],
      ),
    );
  }

  _buildLogo() {
    return Positioned(
      left: (Get.width - 45.r) / 2 - 45.r,
      top: -45.r,
      child: Container(
        height: 90.r,
        width: 90.r,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(AtiAssets.userLoginLogo, package: 'ati_package'),
            fit: BoxFit.fitWidth,
          ),
        ),
      ),
    );
  }

  _buildDelete() {
    return Positioned(
      right: 15.r,
      top: 10.r,
      child:
          Image.asset(
            height: 25.r,
            width: 25.r,
            AtiAssets.atiDeleteIcon,
            package: 'ati_package',
            color: AtiColor.primary,
          ).addTapGesture(
            onTap: () {
              Get.back();
            },
          ),
    );
  }

  _buildContentBg() {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.only(
        top: 55.r,
        bottom: 22.5.r,
        left: 22.5.r,
        right: 22.5.r,
      ),
      decoration: BoxDecoration(
        color: Color.fromRGBO(2, 88, 93, 0.56),
        borderRadius: BorderRadius.circular(14.r),
        border: Border.all(width: 1.r, color: Colors.white),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            'ATI',
            style: TextStyle(
              color: AtiColor.textHLColor1,
              fontSize: AtiFont.font18,
              fontWeight: FontWeight.w600,
            ),
          ),
          SizedBox(height: 15.r),
          Text(
            '用户注册',
            style: TextStyle(
              color: AtiColor.textHLColor1,
              fontSize: AtiFont.font18,
              fontWeight: FontWeight.w600,
            ),
          ),
          _buildTextInput(),
          _buildFootWidgets(),
        ],
      ),
    );
  }

  _buildTextInput() {
    return Container(
      padding: EdgeInsets.only(top: 10.r, bottom: 17.5.r),
      child: FormBuilder(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AtiTextInput(
              name: 'oldPassword',
              radius: 25.r,
              hint: '用户名（仅限英文和数字）',
              showClearButton: true,
              validator: (val) =>
                  val == null || val.isEmpty ? '请输入邮箱/用户名' : null,
            ),
            AtiTextInput(
              name: 'newPassword',
              radius: 25.r,
              hint: '昵称',
              showClearButton: true,
              validator: (val) =>
                  val == null || val.isEmpty ? '请输入邮箱/用户名' : null,
            ),

            AtiTextInput(
              name: 'newPassword',
              radius: 25.r,
              hint: '密码（英文加数字）',
              showClearButton: true,
              validator: (val) =>
                  val == null || val.isEmpty ? '请输入邮箱/用户名' : null,
            ),
            AtiTextInput(
              name: 'newPassword',
              radius: 25.r,
              hint: '确认密码',
              showClearButton: true,
              validator: (val) =>
                  val == null || val.isEmpty ? '请输入邮箱/用户名' : null,
            ),
            AtiTextInput(
              name: 'newPassword',
              radius: 25.r,
              hint: '请输入交易密码（6位纯数字）',
              showClearButton: true,
              validator: (val) =>
                  val == null || val.isEmpty ? '请输入邮箱/用户名' : null,
            ),
            AtiTextInput(
              name: 'newPassword',
              radius: 25.r,
              hint: '请输入邀请码',
              showClearButton: true,
              validator: (val) =>
                  val == null || val.isEmpty ? '请输入邮箱/用户名' : null,
            ),
          ],
        ),
      ),
    );
  }

  _buildFootWidgets() {
    // Icons.check_box_outline_blank
    return Container(
      child: Column(
        children: [
          Row(
            children: [
              Icon(Icons.check_box, color: AtiColor.primary, size: 20.r),
              Text(
                '阅读并同意《用户协议》和《隐私政策》',
                style: TextStyle(
                  color: AtiColor.textHLColor1,
                  fontSize: AtiFont.font12,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),

          AtiCommonBtn(
            onPressed: () {},
            titleStr: '登录',
            margin: EdgeInsets.only(top: 25.r, bottom: 7.5.r),
          ),
        ],
      ),
    );
  }
}
